<!-- 讲师申请 -->
<template>
    <div class="app-container">
        <el-form :inline="true" :model="searchObj" class="demo-form-inline">
            <el-form-item label="申请人">
                <el-input v-model="searchObj.name" placeholder="申请人"></el-input>
            </el-form-item>
            <el-form-item label="审批状态">
                <el-select v-model="searchObj.status" placeholder="请选择" clearable>
                    <el-option key="0" label="待审核" :value="0"></el-option>
                    <el-option key="-1" label="审核不通过" :value="-1"></el-option>
                    <el-option key="1" label="审核通过" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="申请时间">
                <el-date-picker
                    v-model="beginEndTime"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="pageApply()">查询</el-button>
            </el-form-item>
        </el-form>

        <!--****************************表格数据*****************************-->
        <el-table :data="applies" style="width: 100%">
            <el-table-column label="日期" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.gmtModified }}</span>
                </template>
            </el-table-column>
            <el-table-column label="头像" width="180">
                <template slot-scope="scope">
                    <el-image style="width: 60px; height: 60px" :src="scope.row.avatar" fit="fill"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="180">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status===0" size="medium">待审核</el-tag>
                    <el-tag v-if="scope.row.status===1" type="success">审核通过</el-tag>
                    <el-tag v-if="scope.row.status===-1" type="danger">审核不通过</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="small"
                        type="success"
                        v-if="scope.row.status!==1"
                        @click="doWithApply(scope.row.id,1)"
                    >通过</el-button>
                    <el-button
                        size="small"
                        type="warning"
                        v-if="scope.row.status!==1"
                        @click="doWithApply(scope.row.id,-1)"
                    >不通过</el-button>

                    <el-button
                        size="mini"
                        type="info"
                        @click="$router.push({
                        name: 'teacherApplyInfo',
                        params: { 'id': scope.row.id }
                    })"
                    >详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--****************************分液器*****************************-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="current"
            :page-sizes="[6, 15, 20, 30, 40, 50]"
            :page-size="limit"
            :hide-on-single-page="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>

        <el-backtop :visibility-height="100"></el-backtop>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
    pageUserApply,
    successApply,
    failApply,
} from "@/api/ucenter/teacherApply";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            searchObj: {},
            beginEndTime: "",
            //分液器
            current: 1,
            limit: 6,
            total: 0,
            applies: [],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        beginEndTime(newValue, oldValue) {
            if (newValue) {
                this.searchObj.beginTime = newValue[0];
                this.searchObj.endTime = newValue[1];
            } else {
                this.searchObj.beginTime = "";
                this.searchObj.endTime = "";
            }
        },
    },
    //方法集合
    methods: {
        pageApply() {
            pageUserApply(this.searchObj, this.current, this.limit).then(
                (response) => {
                    this.applies = response.data.applies;
                    this.total = response.data.rows;
                    console.log(
                        this.isTeacher(),
                        this.$store.getters.teacherId
                    );
                }
            );
        },
        handleSizeChange(val) {
            this.current = parseInt((this.current * this.limit) / val);
            this.limit = val;
            this.pageApply();
        },
        handleCurrentChange(val) {
            this.current = val;
            this.pageApply();
        },
        doWithApply(id, status) {
            if (status === 1) {
                successApply(id).then((response) => {
                    this.pageApply();
                    this.$message({
                        message: "操作成功",
                        type: "success",
                    });
                });
            }
            if (status === -1) {
                failApply(id).then((response) => {
                    this.pageApply();
                    this.$message({
                        message: "操作成功",
                        type: "success",
                    });
                });
            }
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.pageApply();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
</style>